<template>
  <div class="app-container">
    <div class="filter-container">
      <span style="float:left;width:20%;">
        <el-input @keyup.enter.native="handleFilter" clearable class="filter-item" placeholder="用户名"
          v-model="listQuery.username"></el-input>
      </span>
      <span style="float:left;margin-left: 10px;">
        <el-button @click="handleFilter" class="filter-item" type="primary" v-waves icon="el-icon-search">查询</el-button>
        <el-button @click="handleCreate" class="filter-item" type="primary" v-waves icon="el-icon-plus">添加</el-button>
      </span>
      <span style="float:left;margin-left: 10px;">
        <el-dropdown @command="handleCommand" :disabled="btnDisabled">
          <el-button type="warning" v-waves icon="el-icon-download">
            <span>导出</span><i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">导出当前数据</el-dropdown-item>
            <el-dropdown-item command="2">导出全部数据</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </div>
    <!-- 表格 -->
    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%;height: 100%;">
      <el-table-column align="center" label="序号" width="60px">
        <template slot-scope="scope">
          <span>{{ scope.$index +1 + (listQuery.pageSize*(listQuery.page-1))}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="username" sortable label="用户名"></el-table-column>
      <el-table-column align="center" prop="realName" sortable label="姓名"></el-table-column>
      <el-table-column align="center" prop="phone" sortable label="手机号"></el-table-column>
      <el-table-column align="center" prop="deptName" sortable label="部门名称"></el-table-column>
      <el-table-column align="center" sortable label="个人头像">
        <template slot-scope="scope">
          <div v-if="scope.row.faceUri">
            <img :src="scope.row.faceUri" class="user-avatar" />
          </div>
          <div v-else></div>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable label="用户类型">
        <template slot-scope="scope">
          <span>{{getNameByCode(scope.row.type, allDictData.typeOps)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80px" align="center">
        <template slot-scope="scope">
          <span>{{getNameByCode(scope.row.status, allDictData.statusOps)}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="320px">
        <template slot-scope="scope">
          <el-button @click="handleUpdate(scope.row)" size="small" type="success" v-waves icon="el-icon-edit">编辑
          </el-button>
          <el-button @click="handleUpdatePassword(scope.row)" size="small" type="info" v-waves icon="el-icon-edit">修改密码
          </el-button>
          <el-button :disabled="scope.row.username=='admin'" @click="handleDelete(scope.row)" size="small" type="danger"
            v-waves icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <!-- 添加 修改 -->
    <add v-if="showAdd" @flushList="flushList" @closeDialog="closeDialog" :restPath="restPath" :showAdd="showAdd"
      :btnType="btnType" :formData="formData" :fastDfsUrl="fastDfsUrl" :allDictData="allDictData" />

    <!-- 修改密码 -->
    <password v-if="showPassword" @flushList="flushList" @closeDialog="closeDialog" :restPath="restPath"
      :showPassword="showPassword" :formData="formData" />

  </div>
</template>

<script>
  import {
    pageList
  } from '@/api/sys/user/index'
  import {
    getObj,
    deleteObj,
    getDictData
  } from '@/api/common'

  /* 工具 */
  import {
    mapGetters
  } from 'vuex'
  import * as common from '@/utils/base/common'
  import {
    getNameByCode
  } from '@/utils/dictData'
  import * as excel from '@/utils/export2Excel'

  /* 组件 */
  import add from './user-add'
  import password from './user-password'

  export default {
    /* 用户管理 */
    name: 'user',
    data() {
      return {
        restPath: 'sys/user',
        list: null,
        total: null,
        tableKey: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          pageSize: 10,
          username: '',
        },
        btnDisabled: false, //按钮禁用状态

        /* 添加 修改 相关数据 */
        showAdd: false,
        btnType: '', // 当前页面类型 [create update search]
        formData: null,
        allDictData: {
          statusOps: [],
          typeOps: [],
          genderOps: [],
        },

        /* 修改密码 */
        showPassword: false,


      }
    },
    created() {
      this.initData()
    },
    computed: {
      ...mapGetters([
        'fastDfsUrl',
      ]),
    },
    components: {
      add,
      password,
    },
    methods: {

      initData() {
        this.getAllDictData()
        this.getList()
      },

      getAllDictData() {
        const params = {
          dictIds: "USER_STATUS,USER_TYPE,GENDER"
        }
        getDictData(params).then(response => {
          let data = response.data
          this.allDictData.statusOps = data.USER_STATUS
          this.allDictData.typeOps = data.USER_TYPE
          this.allDictData.genderOps = data.GENDER
        }).catch(err => {
          common.message(this, 'error', 2, '获取数据字典失败!')
          console.error(err)
        })
      },

      getNameByCode(val, dictMap) {
        return getNameByCode(val, dictMap)
      },

      // 后台获取列表数据
      getList() {
        this.listLoading = true;
        pageList(this.listQuery).then(response => {
          this.list = response.data.records
          this.total = response.data.total
          this.listLoading = false;
        }).catch(err => {
          this.listLoading = false;
          this.btnDisabled = true // 按钮禁用
          common.message(this, 'error', 2, '调用接口失败!')
          console.error(err)
        })
      },

      // 刷新页面
      flushList() {
        this.closeDialog()
        this.getList()
      },

      //关闭弹出框
      closeDialog() {
        this.showAdd = false
        this.showPassword = false
      },

      // 点击 添加
      handleCreate() {
        this.formData = null
        this.showAdd = true;
        this.btnType = 'create';
      },
      // 点击 修改
      handleUpdate(row) {
        getObj(this.restPath, row.id).then(response => {
          this.formData = response.data
          this.showAdd = true;
          this.btnType = 'update';
        }).catch(err => {
          common.message(this, 'error', 2, '获取数据失败!')
          console.error(err)
        })
      },
      // 点击 修改密码
      handleUpdatePassword(row) {
        this.formData = row
        this.showPassword = true;
      },
      // 点击 删除
      handleDelete(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteObj(this.restPath, row.id).then(response => {
            if (response.code === 200) {
              common.message(this, 'success', 2, '删除数据成功!')
              this.getList()
            } else {
              common.message(this, 'warning', 2, response.message)
            }
          }).catch(err => {
            common.message(this, 'error', 2, '删除数据失败!')
            console.error(err)
          })

        }).catch(() => {});
      },

      // 点击导出
      handleCommand(command) {
        // 导出当前数据
        if (command == 1) {
          this.handleExport()
        } else {
          common.message(this, 'warning', 2, '敬请期待!')
        }
      },

      handleFilter() {
        this.listQuery.page = 1
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },

      // 导出Excel
      handleExport() {
        let listAll = this.list
        if (listAll) {
          if (listAll.length > 0) {
            // 表头信息
            const tHeader = ['序号', '用户名', '姓名', '手机号', '地址']
            // 表头对应字段名
            const filterVal = ['num', 'username', 'realName', 'phone', 'address']
            // 数据
            const list = listAll
            for (var i = 0; i < list.length; i++) {
              list[i].num = (i + 1);
            }
            // 导出Excel文件名
            const excelNm = '用户'
            excel.export2ExcelToJs(tHeader, filterVal, list, excelNm, true)
          } else {
            common.message(this, 'warning', 2, '暂无数据!')
          }
        } else {
          common.message(this, 'warning', 2, '暂无数据!')
        }
      },

    }
  }
</script>

<style scoped>
  .user-avatar {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  @import "~@/styles/list.css";
</style>
